<!--
  Generated template for the LoginPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar align-title="center"  hideBackButton>
    <ion-buttons ion-button icon-only left >
        <button >
            <ion-icon name="menu"  ></ion-icon>
        </button>
     </ion-buttons>
    <ion-title style='text-align:center'>        
        登录
    </ion-title>

    <ion-buttons  ion-button icon-only right>
        <button ion-button >
            <ion-icon name="share" class="ion-md-share"></ion-icon>
        </button>
    </ion-buttons>
</ion-navbar>
</ion-header>


<ion-content>
	<form #loginForm="ngForm" (ngSubmit)="onLogin()" novalidate>
        <ion-item [class.error]="!username.valid && username.touched">
            <ion-icon name="ios-phone-portrait" item-start></ion-icon>
            <ion-input [(ngModel)]="login_data.account" placeholder="手机号" name="username" type="text" #username="ngModel" spellcheck="false" autocapitalize="off" required>
            </ion-input>
        </ion-item>
        <div *ngIf="username.hasError('required') && username.touched" class="error-message">手机号码不能为空</div>
        <div *ngIf="(username.hasError('minlength')||username.hasError('maxlength')||username.hasError('pattern')) && username.touched" class="error-message">* 请输入正确的电话号码</div>


        <ion-item>
            <ion-icon name="md-key" item-start></ion-icon>
            <ion-input [(ngModel)]="login_data.password" name="password" placeholder="密码" type="password" #password="ngModel" required>
            </ion-input>
        </ion-item>

        <div *ngIf="password.hasError('required') && password.touched" class="error-message">密码不能为空</div>
        <div *ngIf="(password.hasError('minlength')) && password.touched" class="error-message">* 密码长度最少为六位</div>
        <button ion-button block [disabled]="!loginForm.valid"  type="submit">
            登录
        </button>
    </form>
    <ion-row responsive-sm>
        <ion-col>
            <button ion-button (click)="GoToSignup()"  block>立即注册</button>
        </ion-col>
        <ion-col>
        </ion-col>
        <ion-col>
            <button ion-button (click)="GoToGetPWD()"  block >忘记密码</button>
        </ion-col>
    </ion-row>
</ion-content>
